<template>
  <div class="employees-container">
    <div class="app-container">
      <PageTools>
        <template #left>
          总记录数：20条
        </template>
        <template #right>
          <el-button
            v-if="$store.state.user.userInfo.roles.points.includes('import_excel')"
            type="warning"
            size="small"
            @click="$router.push('/import')"
          >导入excel</el-button>
          <!-- v-if="$store.state.user.userInfo.roles.points.includes('export_excel')" -->
          <!--
            v-allow="'export_excel'":如果当前用户的权限数据的points数组中有'export_excel'
            则，按钮可见！
          -->
          <el-button
            v-allow="'export_excel'"
            type="danger"
            size="small"
            @click="hExportExcel"
          >导出excel</el-button>
          <el-button type="primary" size="small" @click="showDialog = true">新增员工</el-button>
        </template>
      </PageTools>

      <el-card style="margin-top: 10px;">
        <el-table border :data="list" :default-sort="{prop: 'workNumber'}">
          <el-table-column label="序号" type="index" />
          <el-table-column label="姓名" prop="username" />

          <el-table-column label="头像">
            <!-- prop="staffPhoto" / -->
            <template slot-scope="scope">
              <!-- <img :src="scope.row.staffPhoto"> -->
              <ImageHolder :src="scope.row.staffPhoto" />
            </template>
          </el-table-column>

          <el-table-column label="工号" prop="workNumber" />

          <el-table-column label="聘用形式" prop="formOfEmployment">
            <template slot-scope="scope">
              形式：{{ format(scope.row.formOfEmployment) }}
            </template>
          </el-table-column>

          <el-table-column label="部门" prop="departmentName" sortable />
          <el-table-column label="入职时间" :sortable="true">
            <template slot-scope="scope">
              {{ scope.row.timeOfEntry.slice(0,10) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280">
            <template slot-scope="scope">
              <!-- 页面路由跳转,带参数:
                1. 查询字符串. /detail?id=123
                2. 动态路由    /detail/123    (path:'/detail/:id')
              -->
              <el-button type="text" size="small" @click="$router.push('/detail?id='+scope.row.id)">查看</el-button>
              <el-button type="text" size="small" @click="hAssignRole(scope.row.id)">分配角色</el-button>
              <el-button v-allow="'del_employee'" type="text" size="small" @click="hDel(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            :current-page.sync="curPage"
            :page-size="queryParams.size"
            :page-sizes="[3,10,15,20]"
            :total="total"
            layout="sizes, prev, pager, next, jumper"
            @current-change="hCurrentChange"
            @size-change="hSizeChange"
          />
        </el-row>
      </el-card>
    </div>

    <!-- 取消：esc和点击遮罩时关闭弹框的效果 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="showDialog"
      title="添加新员工"
      @close="hDialogClose"
    >
      <!-- v-if="showDialog" -->
      <EmpDialog ref="empDialog" @close="hClose" @add-success="hAddSuccess" />
    </el-dialog>

    <!-- 取消：esc和点击遮罩时关闭弹框的效果 -->
    <!-- @close="hDialogClose" -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="showDialogRole"
      title="分配角色"
    >
      <!-- v-if="showDialog"
      ref="empDialog" @close="hClose" @add-success="hAddSuccess"
      v-if="showDialogRole"
      -->
      <AssignRole
        :id="curId"
        ref="assignRole"
        @on-success="hUpdateRoleSuccess"
        @close="showDialogRole=false"
      />
    </el-dialog>

  </div>
</template>
<script>

import { getEmployees, delEmployee } from '@/api/employee'
import EmpDialog from './empDialog.vue'
import AssignRole from './assignRole.vue'
import ConstEmployees from '@/constant/employees.js'
console.log('聘用形式', ConstEmployees.hireType)
// reduce((累计器，当前值)=>{}, 初始值)
const EmployFormatMap = ConstEmployees.hireType.reduce((acc, cur) => {
  const key = cur.id
  const value = cur.value
  acc[key] = value
  return acc
}, {})
console.log(EmployFormatMap)
// { 1: '正式', 2: '非正式', 3: '临时', 4: '长期', 5: 'xxxx' }

export default {
  name: 'Employees',
  components: { EmpDialog, AssignRole },
  data() {
    return {
      list: [],
      total: 0, // 总数据条数
      queryParams: {
        page: 1,
        size: 3
      },
      curPage: 1, // 当前页码
      showDialogRole: false, // 是否显示分配角色
      curId: '', // 当前要分配角色的用户id
      showDialog: false // 是否显示添加员工
    }
  },
  computed: {
    // 1. 当前最大的页码
    maxPage() {
      return Math.ceil(this.total / this.queryParams.size)
    },
    // 2. 最后一页是不是满的？
    isLastPageFulled() {
      return this.total % this.queryParams.size === 0
    }
  },
  created() {
    this.loadEmployees()
  },
  methods: {
    transformDate(res) {
      const mapInfo = {
        'id': '编号',
        'password': '密码',
        'mobile': '手机号',
        'username': '姓名',
        'timeOfEntry': '入职日期',
        'formOfEmployment': '聘用形式',
        'correctionTime': '转正日期',
        'workNumber': '工号',
        'departmentName': '部门',
        'staffPhoto': '头像地址'
      }
      // 对data进行格式化
      // res: [{id:'xxxx', departmentName:'总裁办',mobile:'13800000002',.... }, {}, {}]
      // const header = ['编号', '部门名称', '手机号']
      // (一) header
      // 1. 取出所有的属性名
      const props = Object.keys(res[0]) // ['id', 'mobile',....]
      // 2. 从英文的转成中文的
      const header = props.map(zhKey => mapInfo[zhKey])
      console.log('取出所有的属性名', props, header)
      // (二) data
      // const data   = [['xxxx', '总裁办', '13800000002'], [........]]
      const data = res.map(obj => Object.values(obj))
      // ....
      return { header, data }
    },
    // 导出excel
    async hExportExcel() {
      // 1. ajax获取数据
      await this.loadEmployees()

      // console.log(this.list)
      // 2. 数据格式转换 ---> header, data
      const { header, data } = this.transformDate(this.list)
      console.log(header, data)
      // 3. 导出

      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header,
          data,
          filename: '员工数据'
        })
      })
    },
    hAddSuccess() {
      // 用户在子组件中成功添加新员工
      // 1. 关闭弹层
      this.showDialog = false

      // 2. 为了确保新添加的数据能被查询出来，显示在表格中
      //    要跳到最后一页
      if (this.isLastPageFulled) {
        this.queryParams.page = this.maxPage + 1
      } else {
        this.queryParams.page = this.maxPage
      }

      // 3. 重新获取数据
      this.loadEmployees()
    },
    async doDel(id) {
      // 1. 调用API,做删除
      const res = await delEmployee(id)
      console.log(res)

      // 2. 更新页码。如果删除的数据是最后一条，page-1
      if (this.list.length === 1) {
        this.queryParams.page--
        if (this.queryParams.page <= 0) {
          this.queryParams.page = 1
        }
      }
      // 3. 重发请求
      this.loadEmployees()
    },
    // 用户做删除
    hDel(id) {
      this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDel(id)
      }).catch(() => {
      })
    },
    async loadEmployees() {
      const res = await getEmployees(this.queryParams)
      this.list = res.data.rows

      this.total = res.data.total
      // 更新当前的页码
      this.curPage = this.queryParams.page
    },
    // 做聘用格式转换
    // 1 ---> 正式
    // 2 ---> 非正式
    // 3 ---> 临时
    // 4 ---> 长期
    format(val) {
      return EmployFormatMap[val] || '未知'

      // if (val === 1) {
      //   return '正式'
      // } else if (val === 2) {
      //   return '非正式'
      // } else if (val === 3) {
      //   return '临时'
      // } else if (val === 4) {
      //   return '长期'
      // }
    },
    // 用户点击了页码
    hCurrentChange(curPage) {
      // alert(curPage)
      // 1. 更新页码
      this.queryParams.page = curPage
      // 2. 重发请求
      this.loadEmployees()
    },
    // 用户点击每页条数
    hSizeChange(curPageSize) {
      // alert(curPageSize)
      // 1. 更新每页条数
      this.queryParams.size = curPageSize
      // 2. 重发请求
      this.loadEmployees()
    },
    hTest() {
      console.log(this)
      console.log(this.abcd)
      this.$hello()
    },
    // 收到子组件关闭弹框
    hClose() {
      this.showDialog = false
    },
    // el-dialog 的 showDialog 从true -> false
    hDialogClose() {
      // 清空子组件中的表单数据
      // 通过ref找到子组件，调用它的重置方法

      this.$refs.empDialog.resetForm()
    },
    // 用户点击了分配角色
    hAssignRole(id) {
      // alert(id)
      // 1. 显示弹框
      this.showDialogRole = true

      // 2. 更新curId
      this.curId = id

      this.$nextTick(() => {
        // 3. 找到子组件，调用loadRolesById获取用户角色并回填
        this.$refs.assignRole.loadRolesById()
      })
    },
    // 子组件成功更新角色数据
    hUpdateRoleSuccess() {
      // 1. 关闭弹层
      this.showDialogRole = false
      // 2. 更新数据
      this.loadEmployees()
    }
  }
}
</script>
